<template>
  <div class="home middle clearfloat">
    <div class="agent-info fl">
      <el-row type="flex">
        <el-col :span="11" align="right">
            <el-upload
              class="upload-demo"
              :action="uploadImgUrl"
              :on-success="handleSuccess"
              :show-file-list="false"
              multiple
              :before-upload="beforeUpload">
              <img :src="baseUrl + '/storage/upload/' + $store.state.user.img" class="avatar">
            </el-upload>
        </el-col>
        <el-col :span="13">
          <div class="info-welcome">
            <span>欢迎&ensp;</span>
            <span v-if="this.$store.state.user.name">{{$store.state.user.name}}</span>
            <span v-else>{{$store.state.user.nickname}}</span>
            <div class='info-vip' slot="reference" v-if="$store.state.user.vip" @click="toVip">
            </div>
          </div>
          <div class="achi-title" :style="{color:achi_showImg&&achi_showImg.length?achi_showImg[0].color:''}">
            {{achi_showImg&&achi_showImg.length?achi_showImg[0].name:''}}
          </div>
        </el-col>
      </el-row>
      <!-- <div style="height:80px;margin-top: 45px;">
        <div v-if="imgOnly_none" class="achi_badge">
          <div style="display:inline-block;">
            <img :src="achi_Noimg" alt="" class="achi_topImg" @click="shickAchi">
            <img :src="achi_Noimg" alt="" class="achi_topImg" @click="shickAchi">
            <img :src="achi_Noimg" alt="" class="achi_topImg" @click="shickAchi">
          </div>
        </div>
        <div v-else class="achi_badge">
          
          <el-popover
            v-if="imgOnly_more"
            v-model="visible"
            placement="bottom"
            width="220"
            popper-class='option-menu'
            :visible-arrow='false'
            trigger="manual">
            <div  slot="reference">
              <div v-for="(item, index) in achi_showImg" :key="index" class="achi_layout">
                <img :src="baseUrl + '/storage/upload/' + item.img" alt="" 
                  class="achi_icon" @click="changeAchi(index)" />
              </div>
            </div>
            <ul v-for="(item2,i) in achi_finish" :key="i" style="list-style: none;margin: 0px;padding: 0px;">
              <li style="width: 33.3%; float: left;overflow: hidden; line-height:1.6em;">
                <img :src="baseUrl + '/storage/upload/' + item2.img" alt='' style="width:60px;height:63px" @click="pullDown(i)"/>
              </li>
            </ul>
          </el-popover>

          <div v-else>
            <div v-if="achi_showImg != null && achi_showImg.length == 1" class="achi_layout">
              <img :src="baseUrl + '/storage/upload/' + achi_showImg[0].img" 
                alt="" class="achi_topImg" @click="shickAchi">
              <img :src="achi_Noimg" alt="" class="achi_topImg" @click="shickAchi">
              <img :src="achi_Noimg" alt="" class="achi_topImg" @click="shickAchi">
            </div>
            <div v-if="achi_showImg != null && achi_showImg.length == 2" class="achi_layout">
              <img :src="baseUrl + '/storage/upload/' + achi_showImg[0].img" alt="" 
                class="achi_topImg" @click="shickAchi">
              <img :src="baseUrl + '/storage/upload/' + achi_showImg[1].img" alt="" 
                class="achi_topImg" @click="shickAchi">
              <img :src="achi_Noimg" alt="" class="achi_topImg" @click="shickAchi">
            </div>
            <div v-if="achi_showImg != null && achi_showImg.length == 3">
              <div v-for="(item, index) in achi_showImg" :key="index" class="achi_layout">
              <img :src="baseUrl + '/storage/upload/' + item.img" alt="" 
                class="achi_topImg" @click="shickAchi"/>
              </div>
            </div>
          </div>
        </div>
      </div> -->
      

      <div class="info-rate">
        <div class="rate-itme">
          <span class="rate-lable">服务态度</span>
          <el-rate
            :value="attitude"
            disabled
            show-score
            allow-half
            disabled-void-icon-class='el-icon-star-on disabled'  
            score-template="{value}">
          </el-rate>
        </div>
        <div class="rate-itme">
          <span class="rate-lable">撰写质量</span>
          <el-rate
            :value="quelity"
            disabled
            show-score
            allow-half
            disabled-void-icon-class='el-icon-star-on disabled'  
            score-template="{value}">
          </el-rate>
        </div>
        <div class="rate-itme">
          <span class="rate-lable">撰写耗时</span>
          <el-rate
            :value="take_time"
            disabled
            show-score
            allow-half
            disabled-void-icon-class='el-icon-star-on disabled'
            score-template="{value}">
          </el-rate>
        </div>
      </div>
      <!-- <div :class="agentGradClass"></div> -->
    </div>
    <div class="agent-content fr">
      <nuxt-child :key="$route.fullPath"></nuxt-child>
    </div>
  </div>
</template>

<script>
import { getUserInfo, updateUser, getMyInfo } from "~/api/user";
import {apiAddress} from '~/util/config.js';
export default {
 
  data () {
    return {
      visible:false,
      achi_Noimg: require('~/assets/img/achi_Noimg.png'),
      tx_img:'',
      uploadImgUrl: global.baseurl + "/api/upload/img",
      changeIndex:0,
      achi_showImg:null,
      achi_finish:[],
      imgOnly_none:false,
      imgOnly_more:false,
      nowImg:'',
      baseUrl: global.baseurl,
    }
  },
  computed: {
    agentGradClass () {
      if (this.$store.state.user.grade) {
        switch(this.$store.state.user.grade) {
          case 1:
            return 'info-level early';
          case 2:
            return 'info-level intermediate';
          case 3:
            return 'info-level senior';
        }
      } else {
        return ''
      }
    },
    attitude () {
      return Number(this.$store.state.user.attitude || 0)
    },
    quelity () {
      return Number(this.$store.state.user.quelity || 0)
    },
    take_time () {
      return Number(this.$store.state.user.take_time || 0)
    },
    
  },
  created () { 
    // this.baseUrl = apiAddress,
    // this.uploadImgUrl = apiAddress + "/api/upload/img",
    this.getUser()
    // this.getAchi()
    // this.getAchiData()
  },
  methods: {
    shickAchi(){
      this.$alert(
        `<p>当前暂无更多的可替换徽章，</p>
         <p>赶快去完成成就，领取徽章吧！</p>`, '提示', {
        confirmButtonText: '确定',
        type:'success',
        center: true,
        dangerouslyUseHTMLString: true,
        callback: action => {
        }
      })
    },
    handleSuccess(res, file, fileList) {
      if (res.code == 200) {
        this.tx_img = res.data
        let obj = { }
        obj.tx_img = this.tx_img
        updateUser(this.$axios, obj)
        .then(res => {
          if (res.data.code == 200) {
            this.$alert('头像修改成功！', '提示', {
              confirmButtonText: '确定',
              type:'success',
              center: true,
              callback: action => {
                // this.getUser()
                let obj1 = this.$store.state.user
                  obj1.img = obj.tx_img
                  this.$store.commit("setUser", obj1)
              }
            })
          } else {
            this.$message({
              message: res.data.message,
              type: "error"
            });
          }
        })
        .catch(err => {
          this.$message({
            message: err,
            type: "error"
          });
  
        });
      } else {
        this.$alert(res.message, '提示', {
          confirmButtonText: '确定',
          callback: action => {
          }
        })
      }
      
    },
    beforeUpload(file) {
      let that = this;
      let canUpload = true; //是否能够上传（布尔值）
      let type = file.name.substring(file.name.lastIndexOf(".") + 1);
      //不区分大小写
      if (!/jpg|jpeg|png|gif|ico/i.test(type)) {
        that.$message({
          message: "文件格式只能是jpg/jpeg/png/gif/ico",
          type: "warning"
        });
        canUpload = false;
      }
      let size = file.size / 1024 / 1024;
      if (size > 0.3) {
        that.$message({
          message: "文件大小不能超过300kb",
          type: "warning"
        });
        canUpload = false;
      }
      return canUpload;
    },
    toVip(){
      this.$router.push('/agent/vip')
    },
    pullDown(index){
      let changeData = {}
      changeData = this.achi_finish[index]
      this.achi_showImg[this.changeIndex] = changeData
      this.$axios
      .put("/api/achievement/change_show_badge",{
        show_badge:this.achi_showImg
      })
      .then(res => {
        if (res.data.code == 200) {
          this.getAchiData()
          this.visible = false
        }
      })
      .catch(err => {
        this.$message.error(err);
      });
    },
    getAchiData(){
      this.$axios
      .get("/api/achievement/get_all_badge")
      .then(res => {
        if (res.data.code == 200) {
          this.achi_finish = res.data.data;
          if(this.achi_finish.length > 0){
            this.imgOnly_more = true
          }
        }
      })
      .catch(err => {
        this.$message.error(err);
      });
    },
    changeAchi(index){
      this.changeIndex = index
      this.visible = true
    },
    getAchi(){
      this.baseUrl = apiAddress
      if(this.$store.state.user.show_badge != null){
        this.achi_showImg = this.$store.state.user.show_badge
      }
      if(this.achi_showImg != null){
        this.achi_showImg = JSON.parse(this.achi_showImg)
        if(this.achi_showImg.length == 0){
          this.imgOnly_none = true
        }
      }else{
        this.imgOnly_none = true
      }
    },
    // 获取个人成就信息
    getUser() {
      this.$axios
      .get("/api/consumer/show")
      .then(res => {
        if (res.data.code == 200) {
          this.$store.commit('setUser',res.data.data)
          this.getAchiData()
          this.getAchi()
        }
      })
      .catch(err => {
        this.$message.error(err);
      });
    },
  },
  mounted() {
    this.baseUrl = apiAddress,
    this.uploadImgUrl = apiAddress + "/api/upload/img"
    // this.getUser()
    // this.getAchi()
    // this.getAchiData()
  },
  component:{
      
  }
}
</script>

<style lang='less' scoped>
  .home {
    margin-top: 19px;
    height: 660px;
    .agent-info {
      width:404px;
      height: 100%;
      background:linear-gradient(0deg,rgba(85,173,255,1) 0%,rgba(182,215,255,1) 100%);
      .achi_badge{
        // margin-top: 45px;
        text-align:center;
        .achi_chick{
          width:67px;
          height:70px;
          margin:0 12px;
          border:1px solid #FFF;
          display:inline-block;
          cursor:pointer;
        }
        .achi_layout{
          display:inline-block;
        }
        .achi_topImg{
          width: 67px;
          height: 70px;
          margin: 0 12px;
          // cursor:pointer;
        }
        .achi_icon{
          width: 67px;
          height: 70px;
          margin: 0 12px;
        }
      }
      // .el-avatar {
      //   margin-top: 80px;
      //   margin-right: 20px;
      //   display: block;
      // }
      .avatar {
        margin-top: 80px;
        margin-right: 20px;
        display: block;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        // display: block;
      }
      .info-vip {
        height: 28px;
        width: 29px;
        margin-left: 6px;
        // margin: 10px auto;
        float: right;
        background:url('../../assets/img/图标.png') no-repeat;
        background-position:-97px -100px;
      }
      .upgradeVIP {
        padding: 7px 24px 7px 23px;
        background: #0090ff;
        display: block;
        margin: 10px auto 0;
        border-radius: 0px;
      }
      .info-welcome {
        // width: 200px;
        display: inline-block;
        margin: 74px 10px 20px;
        // text-align: center;
        height:20px;
        font-size:18px;
        font-family:Source Han Sans CN;
        font-weight:400;
        color:rgba(27,27,27,1);
        line-height:24px;
      }
      .achi-title{
        font-size: 20px;
        margin: 16px 10px 0;
        // color:#FFF;
        font-family:Source Han Sans CN;
        font-weight:400;
        text-shadow: rgb(43, 113, 186) 0.1em 0.1em 0.2em;
      }
      .info-medal{
         width: 60%;
         margin: 16px auto 0;
         font-size: 15px;
         .achi_title{
          font-size:16px;
          color:#FFF;
          font-family:Source Han Sans CN;
          font-weight:400;
        }
      }
      .icon-medal {
        height: 32px;
        width: 27px;
        margin: 10px auto;
        background:url('../../assets/img/图标.png') no-repeat;
        background-position:-277px -182px;
      }
      .success_point{
        margin: 18px;
        height:15px;
        font-size:13px;
        font-family:Source Han Sans CN;
        font-weight:400;
        color:#FFFFFF;
        line-height:24px;
      }
      /deep/.info-rate {
        width: 320px;
        margin: 70px auto 0;
        .rate-itme {
          margin-bottom: 16px;
        }
        .rate-itme:last-child {
          margin-bottom: 0px;
        }
        .rate-lable {
          font-size:15px;
          font-weight:300;
          color:rgba(255,255,255,1);
          font-family:Source Han Sans CN;
          line-height: 25px;
          height: 25px;
          display: inline-block;
          vertical-align: middle;
        }
        .el-rate {
          display: inline-block;
          margin-left: 22px;
          height: 25px;
          // vertical-align: super;
          .el-rate__item {
            .el-rate__icon {
              margin-right: 14px;
              font-size:  24px;
              background: linear-gradient(0deg,#fddfaf 0%,#fcc752 100%);
              -webkit-background-clip: text;
              color: transparent !important;
            }
            .el-icon-star-on {
              background: linear-gradient(0deg,#fddfaf 0%,#fcc752 100%);
              -webkit-background-clip: text;
              color: transparent !important;
            }
            .el-rate__decimal {
              background: linear-gradient(0deg,#fddfaf 0%,#fcc752 100%);
              -webkit-background-clip: text;
              color: transparent !important;
            }
            .disabled {
              color: #b5c9cb !important;
            }
          }
          .el-rate__text {
            font-size:25px;
            color:rgba(254,177,3,1) !important;
            font-weight: 800;
            font-family:Source Han Sans CN;
            margin-left: 5px;
            // font-style: oblique;
          }
          
          
        }
        
      }
      .info-level {
        width: 160px;
        height: 35px;
        margin: 120px auto 0;
        background:url('../../assets/img/图标.png') no-repeat;
      }
      .early {
        background-position:-67px -496px;
      }
      .intermediate {
        background-position:-279px -496px;
      }
      .senior {
        background-position:-496px -496px;
      }
      .grade-level{
        width: 160px;
        height: 35px;
        margin: 160px auto 0;
        background:url('../../assets/img/图标.png') no-repeat;
        background-position:-67px -445px;
      }
    }
    .agent-content {
      height: 100%;
      width: 543px;
    }
  }
</style>